<template>

	<transition name="remark">
		<div class="wrap" v-if="isShow ">
			<div class="inner_wrap">
				<div class="food-item">
					<div class="icon">
						<img :src="food.icon" alt="" width="57">
					</div>
					<div class="content">
						<h2 class="name">{{food.name}}</h2>

						<!--去掉已选 by xiaofei-->
						<!--<div class="extra" v-if="food.options">
            <span class="options">已选:</span>
            <span class="options" v-for = "(item,index) in food.options" :key="index">{{item.values[optionIndex[index]].name}}</span>
          </div>-->
						<div class="price">
							<span class="now">${{food.price}}</span><span class="old" v-show="food.oldPrice">${{food.oldPrice}}</span>
						</div>

						<aside class="btn_close" @click="cancel">
							<span class="btn_img"></span>
						</aside>

					</div>
				</div>

				<section class="scroll_wrap" ref="optionList">
					<div class="option_content">
						<aside class="option_wrap" v-for="(item, typeIndex) in food.options" :key="typeIndex">
							<p>{{item.name}}</p>
							<span class="item" v-for="(item,index) in item.values " :key="index" :class="{active: index === optionIndex[typeIndex]}" @touchstart="select(typeIndex,index)">
                {{item.name}}
             </span>
						</aside>
						<p>Special Instruction:</p>
						<input type="text" v-model="input">
					</div>
				</section>
				<div class="confirm_wrap">
					<div class="confirm" @click="confirm">Add to cart</div>
				</div>
			</div>

		</div>
	</transition>
</template>
<script type="text/ecmascript-6">
import Vue from "vue";
import BScroll from "better-scroll"; //  const ERR_OK = 0;
export default {
  props: {
    seller: {
      type: Object
    }
  },
  data() {
    return {
      scroll: null,
      curIndex: 0,
      test: "选项1",
      optionIndex: [],
      input: ""
    };
  },
  created() {},
  mounted() {},
  computed: {
    root() {
      return this.$store.state.rootApi;
    },
    isShow() {
      return this.$store.state.isShow.remark;
    },
    food() {
      console.log("optiong-------------");
      return this.$store.state.goodInfo;
    },
    curTarget() {
      return this.$store.state.curTarget;
    },
    selectInfo() {
      let obj = {};
      Object.keys(this.food).map(item => {
        obj[item] = this.food[item];
      });
      obj["access_token"] = localStorage.access_token;
      obj["qty"] = 1;
      obj["note"] = this.input;
      let options = this.food.options;
      obj.cart_id = `${this.food.id}`;
      obj.options_text = [];
      for (let i = 0; i < options.length; i++) {
        obj["options[" + options[i].option_id + "]"] =
          options[i].values[this.optionIndex[i]].value_id;
        obj.cart_id += `_${this.optionIndex[i]}`;
        let text = options[i].values[this.optionIndex[i]].name;
        obj.options_text.push(text);
      }
      console.log(obj.options_text);
      for (let i = 0; i < options.length; i++) {
        obj.card_id = options[i].values[this.optionIndex[i]].value_id;
      }
      return obj;
    }
  },
  watch: {
    isShow(val) {
      let arrIndex = [];
      if (val) {
        let options = this.food.options;
        for (let i = 0; i < options.length; i++) {
          arrIndex.push(0);
        }
        this.optionIndex = arrIndex;
        this.$nextTick(() => {
          console.log("******1*********");
          console.log(this.scroll);
          console.log("******1*********");
          //$refs绑定元素
          if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.optionList, {
              //开启点击事件 默认为false
              click: false
            });
            // console.log(this.scroll)
          } else if (!this.$refs.foodList) {
            return;
          } else {
            this.scroll.refresh();
          }
        });
      }
    }
  },
  methods: {
    confirm() {
      console.log(this.selectInfo);
      if (!this.food.count) {
        Vue.set(this.food, "count", 1);
      } else {
        this.food.count++;
      }
      var data = this.selectInfo;
      this.$store.commit("addCart", this.selectInfo);
      this.$store.commit("setShow", {
        target: "remark",
        status: false
      });
      this.$store.commit("setGoodInfo", {});
      let url = `${this.root}api2/checkout/cart/add`;
      this.$http
        .post(url, data, {
          headers: {
            "Access-Control-Allow-Origin": "*",
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
          }
        })
        .then(
          response => {
            let access_token = response.data.access_token;
            localStorage.access_token = access_token;
          },
          error => {
            console.log(error);
          }
        );
    },
    select(typeIndex, index) {
      this.optionIndex.splice(typeIndex, 1, index);
    },
    cancel() {
      this.$store.commit("setShow", {
        target: "remark",
        status: false
      });
    }
  }
};
</script>

<style lang="less" scoped rel="stylesheet/stylus">
.wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.5);
}

.inner_wrap {
  position: absolute;
  width: 100%;
  height: 7.5rem;
  bottom: 0;
  left: 0;
  background: white;
  -webkit-overflow-scrolling: touch;
  .btn_close {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    border-radius: 5px;
    .btn_img {
      display: block;
      width: 20px;
      height: 20px;
      background: url("assets/btn_close.png");
      background-size: 100% 100%;
    }
  }
}

.food-item {
  display: flex;
  margin: 0.1rem;
  padding-bottom: 18px;
  &:last-child {
    margin-bottom: 0px;
  }
  .icon {
    flex: 0 0 57px;
    margin-right: 10px;
  }
  .content {
    flex: 1;
    .name {
      margin: 2px 0 8px 0;
      font-size: 14px;
      line-height: 14px;
      height: 14px;
      color: rgb(7, 17, 27);
      font-weight: bold;
    }
    .desc,
    .extra {
      font-size: 10px;
      line-height: 10px;
      color: rgb(147, 153, 159);
      .options {
        &:first-child {
          margin-right: 0.3rem;
        }
        margin-right: 0.2rem;
      }
    }
    .desc {
      margin-bottom: 8px;
      line-height: 12px;
    }
    .price {
      font-weight: 700px;
      line-height: 24px;
      .now {
        margin-right: 8px;
        font-size: 14px;
        color: rgb(240, 20, 20);
      }
      .old {
        font-size: 10px;
        color: rgb(147, 153, 159);
        text-decoration: line-through;
      }
    }
    .cartControl-wrapper {
      position: absolute;
      right: 0;
      bottom: 12px;
    }
  }
}

.scroll_wrap {
  box-sizing: border-box;
  width: 100%;
  height: 4rem;
  box-shadow: 0 0.01rem 0.1rem #ccc;
  overflow: hidden;
}

.option_content {
  width: 100%;
  padding: 0.1rem 0 1rem;
  input {
    display: block;
    margin: 0.3rem auto;
    width: 90%;
    height: 0.8rem;
    padding: 0 0.3rem;
    border-radius: 0.1rem;
    boder: 1px solid rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 3px #ccc;
    font-size: 0.3rem;
    text-align: left;
    border: none;
    outline: none;
    box-sizing: border-box;
    &:focus {
      border: 1px solid #1785fd;
    }
  }
  p {
    font-size: 0.2rem;
    padding: 0.1rem 0.1rem;
    background: rgba(0, 0, 0, 0.3);
    color: white;
  }
  .option_wrap {
    display: block;
    width: 100%;
    padding: 0.1rem 0;
    box-sizing: border-box;
    font-size: 0.25rem;
    @height: 0.7rem;

    &:after {
      display: block;
      content: "";
      clear: both;
    }
    .item {
      display: inline-block;
      margin: 0.1rem;
      height: @height;
      border-radius: @height / 2;
      line-height: @height;
      padding: 0 0.5rem;
      margin: 0.1rem;
      color: #1785fd;
      border: 1px solid rgba(1, 1, 1, 0);
      background: rgba(183, 183, 183, 0.3);
      transition: all ease-in-out 300ms;
      &.active {
        color: white;
        background: #1785fd;
      }
    }
  }
}

.confirm_wrap {
  position: absolute;
  bottom: 0.5rem;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .confirm {
    @height: 0.7rem;
    display: inline-block;
    margin: 0.1rem;
    height: @height;
    line-height: @height;
    padding: 0 0.5rem;
    margin: 0.2rem auto;
    text-align: center;
    font-size: 0.3rem;
    color: white;
    border-radius: 0.1rem;
    background: #1785fd;
  }
}

.remark-enter-active,
.remark-leave-active {
  transition: all 0.5s;
}

.remark-enter,
.remark-leave-active {
  transform: translate3d(0, 100%, 0) scale(0.2);
}
</style>